<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
        display: flex;
    }
    
    table {
        text-align: center;
        vertical-align: middle;
        border: 1px solid rgb(163, 163, 163);
        border-spacing: 0;
    }
    
    tr>th {
        background-color: rgb(244, 244, 244);
    }
    
    tr>th,
    tr>td {
        border: 1px solid rgb(163, 163, 163);
        width: 15vw;
        height: 6vh;
    }
    
    .inputArea {
        padding: 30px;
    }
    
    .inputArea>div {
        margin: 20px 0px;
    }
    
    input {
        height: 3vh;
        border-radius: 5px;
        border: 1px solid #cdcdcd;
        outline: none;
        padding-left: 5px;
    }
    
    button {
        border: 0;
        border-radius: 5px;
        color: #fff;
        height: 2em;
        width: 4em;
        margin-left: 2.5vw;
        background-color: rgb(2, 94, 161);
        cursor: pointer;
    }
    
    .warn {
        color: red;
    }
    
    td>span {
        margin: 0 2vw;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in scoreList" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.course}}</td>
                    <td :class="{warn:item.score<60}">{{item.score}}</td>
                    <!-- @事件.prevent 阻止默认行为-->
                    <td><a href="#" @click.prevent="remove(item.id)">删除</a></td>
                </tr>
            </tbody>
            <!-- 添加该项可以使无内容时便于查看 -->
            <tbody v-if="scoreList.length===0">
                <tr>
                    <td colspan="4">暂无内容</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td v-if="scoreList.length!=0" colspan="4">
                        <span>总分：{{sumScore}}</span>
                        <span>平均分：{{AvgScore}}</span>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="inputArea">
            <div>
                <span>科目：</span>
                <!-- 去除空格 -->
                <input @keyup.enter="addRecord" placeholder="请输入科目" v-model.trim="icourse" type="text">
            </div>
            <div>
                <span>成绩：</span>
                <input @keyup.enter="addRecord" placeholder="请输入分数" v-model="iscore" type="text">
            </div>
            <button @click="addRecord">添加</button>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                icourse: '',
                iscore: '',
                scoreList: [{
                    id: 1,
                    course: '语文',
                    score: 48,
                }]
            },
            methods: {
                remove(target) {
                    this.scoreList = this.scoreList.filter((item) => item.id !== target)
                },
                addRecord() {
                    // 前置+号相当于显式转换数据
                    if (!this.icourse || !this.iscore || !+this.iscore) {
                        return
                    }
                    this.scoreList.push({
                        id: +new Date(),
                        course: this.icourse,
                        score: this.iscore
                    })
                    this.icourse = ''
                    this.iscore = ''
                }
            },
            computed: {
                sumScore() {
                    return this.scoreList.reduce((sum, item) => +item.score + sum, 0)
                },
                AvgScore() {
                    // 将计算值保留小数点后两位
                    return (this.sumScore / this.scoreList.length).toFixed(2)
                }
            }
        })
    </script>
</body>

</html>